import { useAppSelector } from "../store/hooks";
import { ConfigProvider, theme } from "antd";
// 定义一个名为 AntdTheme 的函数组件，它接收一个包含子元素的属性对象
// 此组件用于根据应用的主题状态来配置 Ant Design 的主题
const AntdTheme: React.FC = ({ children }) => {
  // 使用 useAppSelector 钩子从 Redux 存储中选择当前的主题
  // state.theme.currentTheme 表示从 state 对象的 theme 属性中获取当前主题
  const heme = useAppSelector((state) => state.theme.currentTheme);

  // 返回一个 ConfigProvider 组件，该组件来自 Ant Design，用于全局配置组件
  return (
    <ConfigProvider
      // 配置主题对象
      theme={{
        // 根据当前主题状态选择不同的算法
        // 如果当前主题不是 "light"，则使用 Ant Design 的暗色算法
        // 否则，使用默认的算法
        algorithm:
          heme !== "light" ? theme.darkAlgorithm : theme.defaultAlgorithm,
      }}
    >
      {/* 将传入的子元素渲染在 ConfigProvider 组件内部 */}
      {children}
    </ConfigProvider>
  );
};

export default AntdTheme;
